import {
  Button,
  message,
  Steps,
  Input,
  Form,
  Image,
  Space,
} from 'antd';
import { useCallback, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { addFodderItemApi } from '../../../api/fodder';

const { Step } = Steps;
const AdvertisingTactics = () => {
  const history = useHistory();
  const [imgs, setImgs] = useState();
  const [alts, setAlts] = useState();
  const [links, setLinks] = useState();
  const [current, setCurrent] = useState(0);
  const [status, setStatus] = useState('process');
  const handleFileChange = useCallback((e) => {
    if (!e.target.value) {
      setImgs('')
      return
    }
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      setImgs(reader.result)
    }
  })
  const handleAltChange = useCallback((e) => {
    setAlts(e.target.value)
  })
  const handleLinkChange = useCallback((e) => {
    setLinks(e.target.value)
  })
  const handleFodderSubmit = useCallback(() => {
    console.log(alts, links, imgs)
    if (!imgs) {
      setStatus('error')
      message.error('请上传图片')
      return
    }
    setStatus('finish')
    addFodderItemApi({ alt: alts, link: links, img: imgs }).then(() => history.push('/advertising/fodder'))
    message.success('恭喜您提交成功')
  })
  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };
  const handleIsNext = useCallback(() => {
    if (current === 0) {
      if (!alts) {
        setStatus('error')
        message.error('不能为空')
        return
      }
      next()
      setStatus('process')
    } else {
      if (!links) {
        setStatus('error')
        message.error('不能为空')
        return
      }
      next()
      setStatus('process')
    }
  })

  const alt = <Input value={alts} onChange={handleAltChange} />
  const link = <Input value={links} onChange={handleLinkChange} />
  const img = (
    <>
      <Input type="file" onChange={handleFileChange} />
      <Image src={imgs} />
    </>
  )
  const steps = [
    {
      title: '第一步(输入图片地址)',
      label: 'Alt',
      name: 'alt',
      content: alt,
    },
    {
      title: '第二步(输入alt名称)',
      label: 'Link',
      name: 'link',
      content: link,
    },
    {
      title: '第三步(输入链接地址)',
      label: '图片',
      name: 'img',
      content: img,
    },
  ];

  return (
    <Space direction="vertical" style={{ display: 'flex', padding: '20px' }}>
      <Steps current={current} status={status}>
        {steps.map((item) => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <Form
        style={{ marginTop: '20px' }}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        onFinish={handleFodderSubmit}
      >
        <Form.Item label={steps[current].label} name={steps[current].name} required>
          {steps[current].content}
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
          {current < steps.length - 1 && (
            <Button type="primary" onClick={handleIsNext}>
              下一步
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          )}
          {current > 0 && (
            <Button
              style={{
                margin: '0 8px',
              }}
              onClick={() => prev()}
            >
              上一步
            </Button>
          )}
        </Form.Item>
      </Form>
    </Space>
  )
}
export default AdvertisingTactics;
